<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      const routes = [
        {
          path: '/acl',
          name: '权限管理',
          component: 'Layout',
          children: [
            {
              path: 'user/list',
              name: '用户管理',
              component: 'acl/user/list'
            },
            {
              path: 'role/list',
              name: '角色管理',
              component: 'acl/role/list'
            },
            {
              path: 'menu/list',
              name: '菜单管理',
              component: 'acl/menu/list'
            }
          ]
        },
        {
          path: '/acl',
          name: '权限管理',
          component: 'Layout',
          children: [
            {
              path: 'user/list',
              name: '用户管理',
              component: 'acl/user/list'
            },
            {
              path: 'role/list',
              name: '角色管理',
              component: 'acl/role/list'
            },
            {
              path: 'menu/list',
              name: '菜单管理',
              component: 'acl/menu/list'
            }
          ]
        }
      ]

      const anyRoute = {
        path: '/:catchAll(.*)',
        name: '404',
        component: () => import('@/views/404.vue'),
        hidden: true
      }

      const res = []
      /*  function handlerRoutes(routes) {
        routes.forEach((item) => {
          if (item.children && item.children.length) {
            handlerRoutes(item.children)
          }
          res.push(item.name)
        })
        return res
      } */
      function handlerRoutes(routes) {
        return routes.map((item) => item.name)
      }
      const res1 = handlerRoutes(routes).concat(anyRoute.name)
      console.log(res1)
    </script>
  </body>
</html>
